import React from "./react";
import ReactDOM from "./react-dom";
class ClassComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 0,
        };
    }

    add = (event) => {
        // 异步：事件的函数和react内部方法
        // 同步：其他方法都是同步
        this.setState({
            num: this.state.num + 1,
        });
        this.setState({
            num: this.state.num + 1,
        });
    };

    render() {
        return (
            <div>
                <h1 style={this.props.style}>{this.state.num}</h1>
                <button onClick={this.add}>+</button>
            </div>
        );
    }
}

const rootElement = <ClassComponent name="aaaa" style={{ color: "red" }}></ClassComponent>;

ReactDOM.render(rootElement, document.getElementById("root"));

// 核心思想
// 异步：事件的函数和react内部方法
// 同步：其他方法都是同步

// 1. 事件的处理函数通过事件委托形式到祖先组件统一处理
// 2. dom对应的事件处理通过store采取键值对存储事件类型和对应处理方法
// 3. 事件处理方法前通过加锁形式，不让它马上更新的方法
// 4. 期间每次setState，会把每次的state添加到Updater的paddingState中，并把相应updater加到updateQueue
// 5. 事件处理方法后解锁，通过追加和覆盖得到最新的state，并执行更新组件

// 事件委托形式到祖先组件统一处理
// function dispatchEventFun(event) {
//     let { target, type } = event;
//     let eventType = "on" + type;
//     // 通过target找出对应的是哪个dom的触发
//     let { store } = target;
//     let handler = store[eventType];

//     updateQueue.isBatchData = true;
//     let syntheticBaseEvent = createBaseEvent(event);
//     handler && handler(syntheticBaseEvent);

//     updateQueue.isBatchData = false;
//     updateQueue.batchUpdate();
// }

// 添加待更新的state
// addState(partialState) {
//     this.paddingState.push(partialState);
//     this.emitUpdate();
// }

//     // 判断是异步还是同步更新
// emitUpdate() {
//     if (updateQueue.isBatchData) {
//         //异步更新
//         //需要收集setState
//         updateQueue.updaters.push(this);
//         return;
//     }

//     // 同步更新
//     this.updateComponent();
// }
